<template>
  <div class="contain-text">
    <h1 style="text-align: center">个人信息页</h1>
    <img :src="obj.photo" alt="头像" style="float: right">
    <div ref="text" class="text">
      <p>
        账 号 <input class="block2 block" type="text" :value="obj.name" disabled="">
      </p>
      <p>
        姓 名 <input class="block" type="text" :value="obj.username" disabled="">
      </p>
      <p>
        电 话 <input class="block" type="text" :value="obj.phone" disabled="">
      </p>
      <p>
        性 别 <select class="block" name="sex" id="1" disabled="">
        <option value="0" :selected="{active:obj.sex==='男'}">男</option>
        <option value="1" :selected="{active:obj.sex==='女'}">女</option>
      </select>
      </p>
      <p>
        Q Q <input class="block" type="text" disabled="" :value="obj.qq">
      </p>
      <p>
        楼 栋 <select class="block1 block" name="houseId" id="" disabled="">
        <option v-for="item in houseList" :key="item.id" :value="item.id"
                :selected="{active:obj.houseName === item}">{{ item.name }}
        </option>
      </select>
      </p>
      <p>
        房 间 <input class="block" type="text" disabled="" :value="obj.house">
      </p>

      <button @click="edit">编辑</button>
      <button @click="ok">确定</button>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import {HOST} from "@/utils/constant";

export default {
  name: "Text1",
  props: {
    obj: {
      type: Object,
      require: false,
      default: {
        username: 1,
        name: 2,
        phone: 3,
        sex: 1,
        qq: 975836251,
        house: '重庆市',
        photo: 'url',
      }
    }
  },
  created() {

    axios.get(HOST + '/select/house', {
      timeout: 5000,
    }).then(response => {
      console.log(response);
      this.houseList = response.data.data;
    }).catch(err => {
      console.log(err);
    })
  },
  data() {
    return {
      disabled: 'disabled',
      houseList: [],
    }
  },
  methods: {
    edit() {
      const list = this.$refs.text.getElementsByClassName('block');
      for (let i = 0; i < list.length; i++) {
        list[i].removeAttribute('disabled');
      }
      if (sessionStorage.getItem('type') === '0') {
        this.$refs.text.getElementsByClassName('block1')[0].removeAttribute('disabled');
      }
    },
    ok() {
      const update = [];
      /*先还原*/
      const list = this.$refs.text.getElementsByClassName('block');
      if (sessionStorage.getItem('type') === '1') this.$refs.text.getElementsByClassName('block1')[0].setAttribute('disabled', '');
      for (let i = 0; i < list.length; i++) {
        if (list[i].tagName === 'INPUT') {
          update.push(list[i].value)
        } else {
          update.push(list[i].selectedIndex)
        }
        list[i].setAttribute('disabled', '');
      }

      const obj = {};
      obj.name = update[0];
      obj.userName = update[1];
      obj.mobile = update[2];
      obj.sex = update[3] === 0 ? '男' : '女';
      obj.qq = update[4];
      obj.houseName = update[5];
      obj.roomName = update[6];
      obj.houseId = sessionStorage.getItem('houseId');
      console.log(obj);

      let url = '';
      if (sessionStorage.getItem('type') === '0') {
        obj.userId = sessionStorage.getItem('userId');
        url = HOST + '/update/user/self';
      } else {
        obj.managerId = sessionStorage.getItem('managerId');
        url = HOST + '/update/Manager'
      }

      axios.post(url, obj, {
        timeout: 5000,
      }).then(response => {
        alert(response.data.message);
      }).catch(err => {
        console.log(err);
      })
    }
  }
}
</script>

<style scoped>

.contain-text {
  height: 100%;
  width: 100%;
  background-image: url("../assets/sea.jpg");
  background-size: 100% 100%;
}

.block1,
.block2,
.block {
  width: 200px;
  height: 20px;
  margin-top: 20px;

}

.text {
  text-align: center;
  margin-top: 50px;
  width: 25%;
  height: 35%;
  margin-left: 100px;
  border: 1px solid;

  /*background-color: white;*/
}
</style>